<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home Page</title>
</head>

<body>
  <video id="video" style="width: 100vw; height: 100vh; object-fit: cover;position: relative;z-index: 0;" autoplay loop>
    <source src="/movie.mp4" type="video/mp4" />
  </video>
  <canvas id="myCanvas" width="800" height="600"
    style="width: 100%; height: 100%;margin-top: -100vh;position:absolute;z-index: 2;"></canvas>

  <script>
    const playVideo = () => {
      var video = document.getElementById("video");
      video.play();
    }
    // 获取画布和上下文
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const point = {
      x: 0,
      y: 0,
      a: 0
    }

    const drawRect = () => {
      ctx.strokeStyle = `rgba(255,0,255,${point.a})`; // 方块颜色
      ctx.lineWidth = 2; // 设置边框宽度
      ctx.strokeRect(point.x - 25, point.y - 25, 50, 50); // 绘制空心方块
    }

    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      if (point.a > 0) {
        point.a = point.a - 0.025
      }
      if (point.a == 0 || point.a < 0) {
        point.a = 0
      }
      drawRect()
      requestAnimationFrame(render);
    }
    function handleClick(event) {
      var canvasRect = canvas.getBoundingClientRect(); // 获取画布的位置信息
      var x = event.clientX - canvasRect.left; // 获取相对于画布左上角的 X 坐标
      var y = event.clientY - canvasRect.top; // 获取相对于画布左上角的 Y 坐标
      playVideo()
      point.x = x;
      point.y = y;
      point.a = 1;
    }
    canvas.addEventListener("click", handleClick);
    window.onload = function () {
      render();
    };
  </script>
</body>

</html>